<template>
	<view class="container">
		<u-navbar class="wd-navbar" :is-back="false" :border-bottom="false" :background="{ background: 'linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%)' }">
			<view class="wd-navbar-down" @click="popupShow = !popupShow">
				<u-icon :name="popupShow?'arrow-up':'arrow-down'" color="#fff" size="28" :label="currentShop?currentShop.name:''" label-color="#fff" label-size="28" label-pos="left" margin-right="8"></u-icon>
			</view>
		</u-navbar>
		<u-popup v-model="popupShow" mode="top" z-index="970" border-radius="24" :custom-style="{top: tabsTop}">
			<view class="down-menu">
				<view class="down-menu-cell" v-for="(item,index) in menuList" :key="index" @click="menuChange(index)">
					<view class="title" :class="{'active':currentShop&&currentShop.id==item.id}">{{ item.name }}</view>
					<view class="action">管理</view>
				</view>
			</view>
		</u-popup>
		<view class="tabs-fixed" :style="{top: tabsTop}">
			<u-tabs :list="tabsList" :is-scroll="false" :current="tabsIndex" @change="tabsChange" bg-color="linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%)" active-color="#fff" inactive-color="#fff" font-size="32" bar-height="6" bar-width="100"></u-tabs>
			<wd-calendar-week @click="weekClick"></wd-calendar-week>
		</view>
		<!-- mescroll-body start -->
		<mescroll-body ref="mescrollRef" top="240" bottom="100" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="timetable-list">
				<view class="timetable-list__item" :class="{'timetable-list__item--over':item.status==1}" v-for="(item,index) in dataList" :key="index" @click="appointment" :data-index="index">
					<view class="timetable-list__item-state">{{ item.status == 1?'已结束':(item.status == 2?'未开始':'进行中') }}</view>
					<view class="timetable-list__item-head">
						<image class="thumb" :src="item.course.image" mode="aspectFill"></image>
						<view class="content">
							<view class="title">{{ item.course.name }}<text v-for="titem in item.course.tags_text">{{ titem }}</text></view>
							<view class="time">开课时间 {{ item.start_time }}-{{item.end_time}}</view>
						</view>
					</view>
					<view class="timetable-list__item-rate">
						<view>预约 {{ item.appoint_count }}/{{ item.course.people_count }}</view>
						<u-line-progress height="8" inactive-color="#F2F2F2" active-color="#6D4BBE" :show-percent="false" :percent="item.appoint_count/item.people_count*100"></u-line-progress>
					</view>
					<!-- <view class="timetable-list__item-foot">
						<view>当前<text>{{ item.appoint_line_count }}</text>人在排队</view>
						<u-icon name="arrow-right" color="#D7D7D7" size="26"></u-icon>
					</view> -->
				</view>
			</view>
		</mescroll-body>
		<!-- mescroll-body end -->
		
		<view class="wd-floating-back" @click="goBack">
			<u-icon name="back" color="#fff" size="30" label="返回"  label-color="#fff" label-pos="bottom"></u-icon>
		</view>
		
		<view class="wd-toolbar" :style="{ bottom: 'calc(100rpx + ' + safeAreaBottom + 'px)' }">
			<button class="wd-toolbar-cell" open-type="share" style="background:transparent !important;
border-radius:0 !important;
padding:0 !important;">
				<u-icon name="share" color="#fff" size="34" label="分享" label-color="#fff" margin-left="20"></u-icon>
			</button>
			<view class="wd-toolbar-cell" @click="arrangementTable">
				<u-icon name="calendar" color="#fff" size="34" label="排课" label-color="#fff" margin-left="20"></u-icon>
			</view>
		</view>
		
		<!-- 底部导航栏 start -->
		<wd-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar_manage" :isTabBar="false"></wd-tabbar>
		<!-- 底部导航栏 end -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const app = getApp();
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '当天暂无排课，请点击右下角按钮排课'
					}
				},
				popupShow: false,
				date:'',
				//场馆
				menuList: [],
				currentShop:null,
				//分类
				tabsList: [],
				tabsIndex: 0,
				tabsTop: '68px',
				dataList: [],
				safeAreaBottom: getApp().globalData.safeAreaBottom,
			}
		},
		onLoad() {
			this.$u.getRect('.wd-navbar').then(res => {
				//console.log(res);
				this.tabsTop = res.height+'px'
			});
			this.fetchShops();
			let page = this;
			page.currentShop = this.$core.getCurrentShop();
			uni.$on(app.globalData.event.shopChange,function(shop){
				page.currentShop = shop;
				page.fetchCategory();
			})
		},
		onShareAppMessage(res) {
		    return {
		       title: '课程',
		       path: '/pages/tabbar/class/class'
		    }
		  },
		onShareTimeline() {
			
		},
		methods: {
			//获取店铺
			fetchShops(){
				let that = this;
				that.$core.get({url:'fitness.common/shops',loading:false,data:{},success:(ret)=>{
					if(ret.data.length>0){
						this.menuList = ret.data;
						if(this.currentShop){
							this.$core.setCurrentShop(this.currentShop);
						}else{
							let menu = ret.data[0];
							this.$core.setCurrentShop({id:menu.id,name:menu.name,logo:menu.image_text.length>0?menu.image_text[0]:'',qrcode: menu.qrcode_image_text});
						}
					}
				}});
			},
			//获取分类
			fetchCategory(){
				let shopId = this.currentShop ? this.currentShop.id : 0;
				this.$core.get({url:'fitness.common/category',loading:false,data:{shop_id:shopId},success:(ret)=>{
					 this.tabsList = ret.data;
					 this.mescroll.resetUpScroll()
				}});
			},
			//切换门店
			menuChange(index) {
				if (this.menuList[index].disabled) return;
				let menu = this.menuList[index];
				this.$core.setCurrentShop({id:menu.id,name:menu.name,logo:menu.image_text.length>0?menu.image_text[0]:'',qrcode: menu.qrcode_image_text});
				this.popupShow = false
			},
			//切换分类
			tabsChange(e){
				this.tabsIndex = e;
				this.mescroll.resetUpScroll()
			},
			//获取点击时间
			weekClick:function(e){
				//console.log(e);
				this.date = e;
				this.mescroll.resetUpScroll()
			},
			
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				var tabsList = that.tabsList;
				var tabsIndex = that.tabsIndex;
				let shopId = this.currentShop ? this.currentShop.id : 0;
				var category_id = tabsList[tabsIndex]?tabsList[tabsIndex].id:0;
				var date = that.date;
				if(!shopId || !category_id) return false;
				
				that.$core.post({url:'fitness.manage/arrangement_lists',loading:false,data:{shop_id:shopId,course_category_id:category_id,date:date,page:1,pagesize:99},success:(ret)=>{
					if(page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
					that.dataList = that.dataList.concat(ret.data.data); //追加新数据
					 that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
			
			//排课
			arrangementTable(){
				uni.navigateTo({
					url:'/pages/manage/schedule/schedule'
				})
			},
			//预约详情
			appointment(e){
				var index = e.currentTarget.dataset.index;
				var arrangement = this.dataList[index];
				uni.navigateTo({
					url: '/pages/manage/signUp/signUp?arrangement_id='+arrangement.id
				})
			},
			goBack(){
				uni.switchTab({
					url: '/pages/tabbar/class/class'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.wd-navbar-down {
		padding: 10rpx 24rpx;
	}
	.tabs-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		// height: 238rpx;
		background: #FFFFFF;
		/deep/ .u-tabs {
			border-radius: 0 0 24rpx 24rpx;
		}
	}
	.down-menu {
		background: #FFFFFF;
		&-cell {
			display: flex;
			align-items: center;
			border-top: 1rpx #EDEDED solid;
			padding: 24rpx;
			&:first-child {
				border-top: 0;
			}
			.title {
				flex: 1;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
				overflow: hidden;
				&.active {
					color: #6D4BBE;
				}
			}
			.action {
				display: block;
				border: 1rpx #E1E1E1 solid;
				padding: 0 22rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: #333333;
				border-radius: 99px;
			}
		}
	}
	
	.timetable-list {
		padding: 20rpx 24rpx;
		&__item {
			position: relative;
			margin-bottom: 20rpx;
			padding: 0 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			overflow: hidden;
			&--over {
				.timetable-list__item-state,
				.timetable-list__item-head .title text {
					background: #E8E8E8;
					color: #999999;
				}
			}
			&-state {
				position: absolute;
				top: 0;
				right: 0;
				display: block;
				padding: 0 22rpx;
				background: #6D4BBE;
				line-height: 48rpx;
				font-size: 22rpx;
				color: #FFFFFF;
				border-radius: 0 0 0 24rpx;
			}
			&-head {
				display: flex;
				align-items: center;
				padding-top: 30rpx;
				.thumb {
					display: block;
					margin-right: 25rpx;
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
				}
				.content {
					flex: 1;
					overflow: hidden;
				}
				.title {
					line-height: 48rpx;
					font-size: 34rpx;
					font-weight: 500;
					color: #333333;
					text {
						display: inline-block;
						vertical-align: middle;
						margin-top: -4rpx;
						margin-left: 14rpx;
						padding: 0 14rpx;
						background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
						line-height: 32rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						border-radius: 24rpx 0 24rpx 0;
					}
				}
				.time {
					margin-top: 5rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}
			&-rate {
				padding: 24rpx 0;
				line-height: 30rpx;
				font-size: 22rpx;
				color: #333333;
			}
			&-foot {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1rpx #F7F7F7 solid;
				height: 76rpx;
				line-height: 30rpx;
				font-size: 22rpx;
				color: #333333;
				text {
					color: #6D4BBE;
				}
			}
		}
	}
	.wd-toolbar {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		z-index: 90;
		width: 100%;
		display: flex;
		align-items: center;
		background: rgba(109, 75, 190, 0.9);
		border-radius: 24rpx 24rpx 0 0;
		&-cell {
			position: relative;
			flex: 1;
			text-align: center;
			line-height: 95rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			overflow: hidden;
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -20rpx;
				display: block;
				width: 2rpx;
				height: 40rpx;
				background: rgba(255,255,255,.6);
				border-radius: 9px;
			}
			&:last-child:after {
				display: none;
			}
		}
	}
	.wd-floating-back {
		position: fixed;
		right: 24rpx;
		bottom: 20%;
		z-index: 99;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 96rpx;
		height: 96rpx;
		background: linear-gradient(to right, #A36BFF 0%, #6D4BBE 100%);
		box-shadow: 0 4rpx 14rpx 0 rgba(109,75,190,0.2);
		border-radius: 99px;
	}
</style>